<template>
  <div v-if="loading" style="padding: 20px 0;">
    <van-skeleton title row="20" />
  </div>
  <div v-else class="news_detail">
    <h2>{{ data?.conTitle }}</h2>
    <div class="sub_title">
      <div class="left" v-if="data">{{ data?.conAuthor }}</div>
      <div class="right" v-if="data">{{
        data?.pubTime.split(' ')[0] }}</div>
    </div>
    <div ref="content" class="content" v-html="data?.content" style="font-size: 16px;line-height: 30px;"></div>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, nextTick } from 'vue';
import { ref } from 'vue';
import { INewsDetail } from './type';
import { getNewsDetail } from '@/api/newsDetail';
import { useRoute } from 'vue-router';
const data = ref<INewsDetail>()
const route = useRoute()
const loading = ref(true)
const content = ref(null)
const params = {
  id: route.params.id
}
function checkHasImg(dom: any): boolean {
  for (let i = 0; i < dom.children.length; i++) {
    const element = dom.children[i];
    if (element.tagName === 'IMG' || element.tagName == 'VIDEO') {
      return true
    }
    return checkHasImg(element)
  }
  return false
}
function handleDom() {
  function dfs(dom: any) {
    for (let i = 0; i < dom.children.length; i++) {
      const element = dom.children[i];
      let res = checkHasImg(element)
      if (element.tagName === 'P' && res) {
        element.style.textIndent = '0px'
        element.style.textAlign = 'center'
      }
    }
  }
  setTimeout(() => {
    dfs(content.value)
  }, 0);
}
onMounted(() => {
  getData();
})
function getData() {
  getNewsDetail(params).then(res => {
    if (res.code == 200) {
      data.value = res.data
      handleDom()
    }
  }).finally(res => {
    loading.value = false
  })
}
</script>

<style lang='less' scoped>
.news_detail {
  padding: 0 17.2px;
  padding-bottom: 20px;

  .sub_title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #a5adbc;
  }



  h2 {
    text-align: left;
  }
}
</style>
<style lang="less">
.news_detail {
  .van-loading {
    display: flex;
    justify-content: center;
  }

  .content {

    img,
    video {
      text-indent: 0 !important;
      width: 320px !important;
      height: 180px !important;
    }
  }
}
</style>